Skip to content

Backup: add Jetpack footer to the WP.com page#109886

Open
vianasw wants to merge 2 commits intotrunkfrom
add/jetpack-footer-backup
Open

Backup: add Jetpack footer to the WP.com page#109886
vianasw wants to merge 2 commits intotrunkfrom
add/jetpack-footer-backup

Conversation

@vianasw
Copy link
Copy Markdown
Contributor

@vianasw vianasw commented Apr 8, 2026

Part of JETPACK-1504

Proposed Changes

#109765 added the simplified Jetpack footer to four Calypso pages (Activity Log, Monetize, Traffic, Podcasting) but explicitly left Backup and Scan out due to the additional complexity of testing them. This PR closes the Backup half across all WP.com render paths reachable from /backup/<site-slug>.

Files touched

  • client/my-sites/backup/main.jsx — happy-path BackupPage (when the site has the backup product). Footer gated on isWpcom. Pattern matches Podcasting (client/my-sites/site-settings/podcasting-details/index.jsx) which uses the same <Page> from @wordpress/admin-ui and renders <JetpackFooter /> after </Page> but inside <Main>.
  • client/my-sites/backup/wpcom-backup-upsell.tsxWPCOMUpsellPage reached via the showUpsellIfNoBackup / showUpsellIfNoBackupRestoreFeature middlewares (client/my-sites/backup/index.js) when the site has no backup product or feature. File is wpcom-only by construction (Jetpack Cloud uses a separate backup-upsell component) so no isJetpackCloud() gate is needed.
  • client/my-sites/backup/wpcom-upsell.tsxWPCOMUpsellPage reached via WPCOMBusinessAT on Business-plan WP.com sites that lack WPCOM_FEATURES_BACKUPS_SELF_SERVE. Same wpcom-only construction.
  • client/components/jetpack/wpcom-business-at/index.tsx — shared Atomic-transfer component used by both Backup and Scan. Footer added on both <Main> branches (the featuresNotLoaded placeholder and the transfer CTA), gated on ! isJetpackCloud() because the same component is also rendered by Jetpack Cloud paths. Side effect: this fix also benefits Scan's atomic-transfer flow as a free side-effect, since the component is shared.

Total diff is 9 added lines across 4 files (one import + one render line per file, with the wpcom-business-at file getting two render lines for its two <Main> branches).

Render path coverage

Backup's route middleware chain (client/my-sites/backup/index.js line 97-114) means /backup/<site> can resolve to one of several components depending on the site's plan/features and whether it's WP.com Simple, WP.com Atomic, or Jetpack Cloud:

Render path Component Covered
Has backup product (happy path) main.jsx::BackupPage ✅ this PR
No backup product / feature wpcom-backup-upsell.tsx::WPCOMUpsellPage ✅ this PR
Business-plan, no backup feature, via WPCOMBusinessAT wpcom-upsell.tsx::WPCOMUpsellPage ✅ this PR
Atomic transfer flow, featuresNotLoaded wpcom-business-at/index.tsx (Main #1) ✅ this PR
Atomic transfer flow, transfer CTA wpcom-business-at/index.tsx (Main #2) ✅ this PR
Brief loading-state flash inside UpsellSwitch upsell-switch/index.tsx ❌ intentional — see below
Jetpack Cloud variant backup-upsell (separate component) N/A (gated, has its own chrome)

Out of scope: UpsellSwitch loading flash

client/components/jetpack/upsell-switch/index.tsx wraps its placeholder children in a <Main className="upsell-switch__loading"> during the brief moment between mount and the "do we have a backup product?" data load. This <Main> has no footer, so there's a momentary flash before the loaded state takes over.

This PR intentionally does not modify UpsellSwitch because it's generic Jetpack-feature shared infrastructure used beyond Backup (Anti-Spam, Search, etc.). Adding a footer there would change loading-state appearance for every feature using it, which is a much broader discussion than HEADER-008's scope. Worth its own ticket if we want loading-state footers everywhere.

Why are these changes being made?

#109765 added the simplified Jetpack footer to four Calypso pages (Activity Log, Monetize, Traffic, Podcasting) but explicitly left Backup and Scan out — quoting that PR's description:

Using the footer at Scan & Backup I'm also leaving for another PR due to a bit more complexity of testing those pages, so this is easier to merge sooner.

This PR closes the Backup half. Scan will follow in a sibling PR (#109888). After both land, JETPACK-1504's checklist will be complete and the parent issue (JETPACK-1391) can tick its remaining Calypso boxes.

Testing Instructions

Before / After (happy path, main.jsx)

Screenshot 2026-04-08 at 12 39 42

Before: Backup page ends right at the bottom of the "More backups from today" card with empty white space below it — no footer chrome.

Screenshot 2026-04-08 at 12 39 10

After: Same content with a new row at the bottom showing the green Jetpack pill on the left and the "An Automattic airline" byline on the right, matching the existing footer on Activity Log / Monetize / Traffic / Podcasting.

Steps to verify

  1. Happy path: On a WP.com site with Jetpack Backup active, navigate to /backup/<site-slug>. Expected: footer renders at the bottom of the page.
  2. Upsell path (Simple): On a WP.com Simple site without Backup, navigate to /backup/<site-slug>. The page renders the upsell (WPCOMUpsellPage from either wpcom-backup-upsell.tsx or wpcom-upsell.tsx depending on the plan/feature combo). Expected: footer renders at the bottom.
  3. Atomic transfer path: On a Business-plan WP.com site that triggers the Atomic transfer flow, navigate to /backup/<site-slug>. Expected: footer renders below both the loading placeholder and the transfer CTA.
  4. Jetpack Cloud variant (if available): Navigate to the same Backup page from the Jetpack Cloud variant and confirm the footer does not render — Jetpack Cloud has its own chrome and the isWpcom / isJetpackCloud() gates suppress the new footer for that platform.
  5. Switch to a narrow viewport (≤460px) and confirm the footer wraps cleanly.

DOM check

Quickly verifiable from the browser console:

document.querySelector( 'footer.jetpack-footer' )
// → <footer class="... jetpack-footer" aria-label="Jetpack" role="contentinfo">…</footer>

To confirm there's no duplicate footer rendering:

document.querySelectorAll( 'footer.jetpack-footer' ).length
// → 1

Local validation already performed

Desktop:

  • willstestdotblog.wordpress.com (Simple, no backup → upsell render path via WPCOMBusinessATwpcom-upsell.tsx): footer present after fix; absent before
  • curlingforbeginners9.wpcomstaging.com (Atomic with backup → main.jsx happy path): footer present, footerCount === 1 (no duplicate from the upsell-switch display prop chain)

Mobile viewport (390×844, ≤460px breakpoint):

  • Simple upsell path on willstestdotblog.wordpress.com: footer renders below the "What is Jetpack?" section at the bottom of the page, wraps cleanly, single instance
  • Atomic happy path on curlingforbeginners9.wpcomstaging.com: footer renders below the backup activity cards, wraps cleanly, single instance

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes? — N/A, wiring change with no logic to test
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)? — Simple verified on willstestdotblog.wordpress.com, Atomic verified on curlingforbeginners9.wpcomstaging.com. Self-hosted Jetpack n/a (this code path is wpcom-only by construction).
  • Have you checked for TypeScript, React or other console errors? — none in local build; pre-commit Prettier ran clean
  • Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2). — <footer role="contentinfo" aria-label="Jetpack"> inherits the same a11y as the existing JetpackFooter usages
  • Have you used memoizing on expensive computations? — N/A, no new computations
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)? — no new strings; the footer's "Jetpack" / "An Automattic airline" labels live in JetpackFooter itself and are already translated
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? — N/A, no new strings
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)? — no, no tracking or data changes

Wires the simplified `JetpackFooter` component (introduced in #109765)
into the Backup page entry point, gated on the existing `isWpcom`
variable so it only renders on the WP.com (Calypso) variant — Jetpack
Cloud and A8C-for-Agencies have their own chrome and don't get a
duplicate footer.

Pattern matches Podcasting (`client/my-sites/site-settings/podcasting-details/index.jsx`)
which uses the same `<Page>` from `@wordpress/admin-ui` and renders
`<JetpackFooter />` after `</Page>` but inside `<Main>`.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vianasw vianasw self-assigned this Apr 8, 2026
@matticbot
Copy link
Copy Markdown
Contributor

matticbot commented Apr 8, 2026

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • help-center
  • notifications
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/jetpack-footer-backup on your sandbox.

vianasw added a commit that referenced this pull request Apr 8, 2026
Wires the simplified `JetpackFooter` component (introduced in #109765)
into the Scan page entry point, gated on the existing `isWpcom`
variable so it only renders on the WP.com (Calypso) variant — Jetpack
Cloud and A8C-for-Agencies have their own chrome and don't get a
duplicate footer.

Pattern matches Backup (#109886) and Podcasting from #109765: render
`<JetpackFooter />` after the `<Page>`/fragment branch but inside
`<Main>`, with the same `isWpcom` gate.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vianasw vianasw requested a review from a team April 8, 2026 10:49
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 8, 2026
The original commit only covered the happy-path BackupPage from
main.jsx. Investigation against /backup/<simple-site> revealed three
additional WP.com render paths reachable through the upsell middleware
chain in client/my-sites/backup/index.js that were missing a footer:

1. wpcom-backup-upsell.tsx (WPCOMUpsellPage) — reached via the
   showUpsellIfNoBackup / showUpsellIfNoBackupRestoreFeature middlewares
   when the site has no backup product or feature.

2. wpcom-upsell.tsx (WPCOMUpsellPage) — reached via WPCOMBusinessAT on
   Business-plan WP.com sites that lack WPCOM_FEATURES_BACKUPS_SELF_SERVE.

3. client/components/jetpack/wpcom-business-at/index.tsx — the shared
   Atomic-transfer component, gated on \`! isJetpackCloud()\` because the
   same component is also rendered by Jetpack Cloud paths. Both <Main>
   branches (featuresNotLoaded placeholder and transfer CTA) get a footer.

Both wpcom-{backup-,}upsell.tsx are wpcom-only by construction (Jetpack
Cloud uses a separate backup-upsell component) so no isJetpackCloud()
gate is needed there.

Verified on willstestdotblog.wordpress.com (Simple, upsell path) and
curlingforbeginners9.wpcomstaging.com (Atomic with backup, no regression
on the main.jsx path — single footer, not duplicated).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor

@CGastrell CGastrell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

vianasw added a commit that referenced this pull request Apr 8, 2026
The original commit only covered the happy-path ScanPage from main.tsx.
Investigation against /scan/<simple-site> revealed three additional
WP.com render paths reachable through the Scan controller middleware
chain (client/my-sites/scan/index.js) that were missing a footer:

1. wpcom-scan-upsell.tsx (WPCOMScanUpsellPage) — reached via the
   showUpsellIfNoScan / showUpsellIfNoScanSelfServeFeature middlewares
   (and also for the no_connected_jetpack / vp_active / multisite
   reasons). Renders one of several PromoCard variants based on the
   reason prop. File is wpcom-only by construction — the scan
   controller gates between this and ScanUpsellPage (the Jetpack Cloud
   variant) at isJetpackCloud() || isA8CForAgencies(), so no gate is
   needed inside the file itself.

2. wpcom-upsell.tsx (WPCOMScanUpsellPage — same export name, simpler
   component) — reached via ScanAtomicTransferWrapper in
   wpcom-atomic-transfer.tsx when ! hasScanFeature. Same wpcom-only
   construction.

3. wpcom-atomic-transfer.tsx (ScanLoadingPlaceholder) — the loading
   state rendered by ScanAtomicTransferWrapper while site features or
   scan data are still loading. Scan-specific local component (not
   shared infrastructure), reachable only for non-Jetpack-Cloud sites
   (wpcomJetpackScanAtomicTransfer short-circuits on isJetpackCloud()
   || isA8CForAgencies() at the middleware level).

The inner atomic-transfer CTA path routes through the shared
<WPCOMBusinessAT /> component from
client/components/jetpack/wpcom-business-at/index.tsx. That component
was footered separately in HEADER-008's sibling PR #109886 and will
reach this branch via trunk once that PR merges.

Verified on willstestdotblog.wordpress.com (Simple, no scan feature →
upsell render path via wpcom-atomic-transfer.tsx → wpcom-upsell.tsx)
at mobile viewport (390×844): footer present, single instance, no
layout issues.

Verified the main.tsx happy path still works on
curlingforbeginners9.wpcomstaging.com with footerCount === 1 (no
duplication from the new additions).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants